<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input
				type="text"
				placeholder="enter the name you search"
				v-model="searchName"
			/>
			<button @click="search">Search</button>
		</div>
	</section>
</template>

<script>
import axios from "axios"; // npm i axios

export default {
	name: "SearchUser",
	data() {
		return {
			searchName: "",
		};
	},
	methods: {
		async search() {
			const { searchName } = this;
			if (!searchName) {
				alert("请输入搜索名称");
				return;
			}

			// 发送请求之前，切换loading
			this.$bus.$emit("setLoading", true);

			// axios.get(`https://api.github.com/search/users?q=${searchName}`);
			// axios({
			// 	method: "GET",
			// 	url: `https://api.github.com/search/users?q=${searchName}`,
			// });
			const res = await axios({
				method: "GET",
				url: `https://api.github.com/search/users`,
				params: {
					q: searchName,
				},
			});

			this.$bus.$emit("setLoading", false);
			this.$bus.$emit("setUsers", res.data.items);
		},
	},
};
</script>

<style></style>
